<script setup lang="ts">
import {createdBannerApi, updatedBannerApi, getBannerListApi, POWER, changeStatusApi, getClassifyDataApi, deleteBannerApi} from "@/apps/admin/api/data/banner";
import {usePopupForm} from "@/components/FunctionComponents";
import {useHttpPagingResult} from "@/hooks/http"
import {TableColumn} from "@/components/AppTable/TableType";
import {timestampFormat} from "@/units/time";
import {ref} from "vue";

/**
 * 分类数据
 */
const classify = ref<any[]>([])

/**
 * 搜索条件
 */
const where = ref({
  title: '',
  position: '',
  status: ''
})

/**
 * 获取分类
 */
getClassifyDataApi().then(result => classify.value = result.data)


/**
 * 获取轮播数据
 */
const {getRequestData, list, pagination, loading} = useHttpPagingResult(function (qyery) {
  return getBannerListApi({...qyery, ...where.value})
})

/**
 * 添加广告
 * @constructor
 */
function CreatedBanner() {
  usePopupForm({
    api: createdBannerApi,
    width: '720px',
    onSuccess: () => getRequestData()
  })
}

/**
 * 数据面板操作
 * @param action
 * @param row
 * @constructor
 */
function ActionHandle(action: string, row: any) {
  if (action === 'update') {
    usePopupForm({
      api: updatedBannerApi,
      query: {id: row.id},
      width: '720px',
      onSuccess: () => getRequestData()
    })
  } else if (action === 'remove') {
    deleteBannerApi(row.id).then(result => {
      if (result.code === 200) {
        getRequestData()
      }
    })
  }
}


/**
 * 切换状态
 */
async function changeStatus(value: 0 | 1, id: number) {
  const result = await changeStatusApi(id, value)
  if (result.code === 200) {
    getRequestData()
  }
}

/**
 * 广告列
 */
const columns: Array<TableColumn> = [
  {prop: "id", label: "ID", minWidth: 100, fixed: "left"},
  {prop: "title", label: "广告标题", minWidth: 170, showOverflowTooltip: true, fixed: "left"},
  {prop: "image", label: "广告图", minWidth: 140, type: "image", fixed: "left"},
  {type: "action", label: "操作", width: 100, align: "center", fixed: "left"},
  {prop: "url", label: "跳转链接", minWidth: 300, showOverflowTooltip: true},
  {
    prop: "time", label: "显示时间", minWidth: 300, render(row: any) {
      if (row.start && row.end) {
        return timestampFormat("Y-m-d", row.start) + '-' + timestampFormat("Y-m-d", row.end)
      } else if (row.start) {
        return timestampFormat("Y-m-d", row.start) + '开始'
      } else if (row.end) {
        return '截止到' + timestampFormat("Y-m-d", row.end)
      }
      return '长期有效'
    }
  },
  {
    prop: "position", label: "显示位置", minWidth: 100, render(row: any) {
      for (let item of classify.value) {
        if (item?.value === row.position) {
          return item?.label
        }
      }
      return ''
    }
  },
  {prop: "status", label: "状态", minWidth: 120},
  {prop: "color", label: "主色调", minWidth: 80},
  {prop: "sort", label: "排序", minWidth: 100},
  {prop: "hits", label: "点击量", minWidth: 100, render: (row: any) => row.hits + '次'}

]
</script>

<template>
  <div>
    <data-card>
      <search-form :disabled="loading" label-width="45px" @search="getRequestData({page:1,size:pagination.size})">
        <el-form-item label="标题">
          <el-input v-model.trim="where.title" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select class="app-min-width-p180" clearable v-model="where.status">
            <el-option label="已关闭" value="0"/>
            <el-option label="展示中" value="1"/>
          </el-select>
        </el-form-item>
        <template #more>
          <el-form-item label="位置">
            <el-select class="app-min-width-p180" clearable v-model="where.position">
              <el-option label="不限" value=""/>
              <el-option v-for="(item,index) in classify" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </template>
      </search-form>
    </data-card>

    <data-card title="广告管理" class="app-margin-top-interval">
      <template #right>
        <el-button type="primary" @click="CreatedBanner">
          添加
        </el-button>
      </template>
      <div class="app-margin-top-interval">
        <app-table :data="list" :columns :pagination :loading @reload="getRequestData" @action="ActionHandle">
          <template #status="{ row }">
            <admin-auth :sign="POWER.UPDATED">
              <app-switch :model-value="row.status" @change="changeStatus($event,row.id)" inactive-text="已停止" active-text="推送中"></app-switch>
              <template #fail>
                <app-switch :model-value="row.status" disabled inactive-text="已停止" active-text="推送中"></app-switch>
              </template>
            </admin-auth>
          </template>
          <template #color="{ row }">
            <show-color size="small" :color="row.color"></show-color>
          </template>
        </app-table>
      </div>
    </data-card>
  </div>
</template>